![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
clsx
Advanced tools
Package description
The clsx package is a tiny utility for constructing className strings conditionally. It is also a faster & smaller drop-in replacement for the 'classnames' library.
Conditional class string construction
This feature allows you to construct a class string with conditional classes. If the condition is true, the class is included; otherwise, it is excluded. In the code sample, 'baz' will be included in the output string, while 'qux-quux' will not, resulting in 'foo bar baz'.
clsx('foo', 'bar', { 'baz': true, 'qux-quux': false })
Combining class strings
clsx can combine multiple class strings and arrays of class strings, ignoring falsy values. In the code sample, the output would be 'foo bar baz qux'.
clsx('foo', null, ['bar', 'baz'], { 'qux': true })
Handling arrays and nested arrays
clsx can handle arrays and nested arrays of class names with conditional logic. In the code sample, the output would be 'foo bar baz' as the nested array and object are properly evaluated.
clsx(['foo', ['bar', { 'baz': true }]])
The 'classnames' package is the original utility that clsx was designed to replace. It offers similar functionality for conditionally joining classNames together. clsx claims to be a faster and smaller alternative to 'classnames'.
The 'emotion' package is a performant and flexible CSS-in-JS library. While it is more feature-rich, offering styled components and dynamic styling, it also includes the 'cx' function which is similar to clsx for combining class names conditionally.
Readme
A tiny (228B) utility for constructing
className
strings conditionally.
Also serves as a faster & smaller drop-in replacement for theclassnames
module.
This module is available in three formats:
dist/clsx.m.js
dist/clsx.js
dist/clsx.min.js
$ npm install --save clsx
import clsx from 'clsx';
// or
import { clsx } from 'clsx';
// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'
// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'
// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'
// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'
// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'
// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'
Returns: String
Type: Mixed
The clsx
function can take any number of arguments, each of which can be an Object, Array, Boolean, or String.
Important: Any falsey values are discarded!
Standalone Boolean values are discarded as well.
clsx(true, false, '', null, undefined, 0, NaN);
//=> ''
For snapshots of cross-browser results, check out the bench
directory~!
All versions of Node.js are supported.
All browsers that support Array.isArray
are supported (IE9+).
Note: For IE8 support and older, please install
clsx@1.0.x
and beware of #17.
MIT © Luke Edwards
FAQs
A tiny (239B) utility for constructing className strings conditionally.
The npm package clsx receives a total of 18,419,407 weekly downloads. As such, clsx popularity was classified as popular.
We found that clsx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.